<style>
    *{padding: 0;margin: 0;}
    html,body{
        height: 100%;
        background: black;
    }
    .xuetiao {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100px;
    height: 50px;
    border: solid 5px yellow;
}
.xuetiao span {
    width: 100px;
    height: 50px;
    background-color: red;
    display: block;
}
</style>
<body>
    <div class="xuetiao">
        <span></span>
    </div>
</body>
<script>
    function radom(min,max){
    return Math.floor(Math.random()*(max-min+1)+min)
    }
    var num=100
     document.onclick=function(evt){
    var e = evt || window.event
    var target = e.target || e.srcElement
    if (target.nodeName === 'IMG')
    {
    document.body.removeChild(target)
    num+=5
    var xuetiao=document.querySelector('span')
    xuetiao.style.width=num+'px'
    }
   
}
   var h
    h=setInterval(function(){
     var imgObj=document.createElement('img')
     imgObj.src='./star.gif'
     var w=radom(50,60)
     imgObj.width=w
     imgObj.height=w
     imgObj.style.position='absolute'
     var maxW = (window.innerWidth||document.documentElement.clientWidth) - w
    var maxH = (window.innerHeight||document.documentElement.clientHeight) - w
     var l=radom(0,maxW)
     var t=radom(0,maxH)
     imgObj.style.left=l+'px'
     imgObj.style.top=t+'px'
     document.body.appendChild(imgObj)
     num-=10
     var xuetiao=document.querySelector('span')
     xuetiao.style.width=num+'px'
    if(num<0){
    clearInterval(h)
    alert('游戏结束')
    document.onclick=function(evt){
        return
    }
     }
     },1000)
</script>
